<template>
    <el-container>
        <el-header>
            <Header />
        </el-header>
        <el-container>
            <el-aside width="200px">
                <Nav />
            </el-aside>
            <el-main>
                <Breadcrumb />
                <div class="scroll-area">
                    <RouterView />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import Header from '@/components/layouts/Header.vue'
import Nav from '@/components/layouts/Nav.vue'
import Breadcrumb from "@/components/Breadcrumb/index.vue"
</script>

<style lang="less" scoped>
.el-header {
    background: linear-gradient(90deg, #0396FF, #6AFD90);
    height: 70px;
}

.el-aside {
    background: linear-gradient(90deg, #F97794, #cc5323);
    height: calc(100vh - 70px);

    &::-webkit-scrollbar {
        width: 0;
    }
}

.el-main {
    background-color: #fff;
    color: #000;
    height: calc(100vh - 70px);

    .scroll-area {
        height: calc(100vh - 145px);
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
        }
    }
}
</style>